<template>
  <view class="law-container">
    <view
        class="top"
        :style="{
        background: 'url(' + homebg + ') no-repeat',
        backgroundSize: '100% 100%',
      }"
    >
      <text class="title">欢迎精英律师加入我们</text>
      <text class="sub-title">请编辑资料</text>
    </view>
    <view class="example">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="form">
        <u-form-item
            label="执业律所"
            prop="company"
            borderBottom
            ref="item1"
            labelWidth="65"
        >
          <u-input
              v-model="form.company"
              placeholder="请输入您的执业律所"
              border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="擅长1"
            prop="good1"
            borderBottom
            ref="item1"
            labelWidth="65"
        >
          <u-input
              v-model="form.good1"
              placeholder="请输入您的执业律所"
              border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="擅长2"
            prop="good2"
            borderBottom
            ref="item1"
            labelWidth="65"
        >
          <u-input
              v-model="form.good2"
              placeholder="请输入您的执业律所"
              border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="擅长3"
            prop="good3"
            borderBottom
            ref="item1"
            labelWidth="65"
        >
          <u-input
              v-model="form.good3"
              placeholder="请输入您的执业律所"
              border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="手机号"
            prop="phone"
            borderBottom
            ref="item1"
            labelWidth="65"
        >
          <u-input
              v-model="form.phone"
              placeholder="请输入您的手机号"
              border="none"
              maxlength="11"
              type="number"
          ></u-input>
        </u-form-item>

        <u-form-item prop="info" ref="item1" labelWidth="65">
          <u-textarea
              v-model="form.info"
              placeholder="请输入简介等"
              count
              :height="100"
              :maxlength="200"
          ></u-textarea>
        </u-form-item>
      </u-form>
      <view class="marginTop">
        <view class="flex-row">
          <view class="radio" v-if="!radiovalue" @click="changeState"></view>
          <view class="radio-checked" v-else @click="changeState">
            <u-icon name="checkbox-mark" color="#fff" size="10px"></u-icon>
          </view>
          <view class="flex-row">
            <text style="margin-left: 10rpx">我已阅读并同意 </text>
            <text class="text-red" style="color: #e43d33"
            >《用户服务协议及隐私政策》</text
            >
          </view>
        </view>
      </view>
      <view class="bottom">
        <u-button color="#e43d33" @click="submit">提交</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import Upload from "@/static/const/upload.js";
import { isEmptyArray } from "@/utils/common.js";
import bgBase64 from "@/static/const/bgBase64.js";
import config from "@/config.js";
import {getStorage} from "@/utils/auth";
import application from "@/static/const/application";
import {isPhoneNumber} from "@/utils/verify";

export default {
  data() {
    return {
      imageURL: "/static/images/mine/txbg.png",
      form: {
        company: "",
        good1: "",
        info: "",
        good2: "",
        good3: "",
      },
      userId: "",
      radiovalue: false,
      radiolist: [
        {
          name: "我已阅读并同意《律师服务协议》",
        },
      ],
      rules: {
        company: {
          type: "string",
          required: true,
          message: "执业律所为必填项",
          trigger: ["blur", "change"],
        },
        good1: {
          type: "string",
          required: true,
          message: "擅长1为必填项",
          trigger: ["blur", "change"],
        },
        good2: {
          type: "string",
          required: true,
          message: "擅长2为必填项",
          trigger: ["blur", "change"],
        },
        good3: {
          type: "string",
          required: true,
          message: "擅长3为必填项",
          trigger: ["blur", "change"],
        },
        phone: {
          type: "string",
          required: true,
          message: "手机号为必填项",
          trigger: ["blur", "change"],
          validate: (rule, value, callback) => {
            if (!/^1[3456789]\d{9}$/.test(value)) {
              callback(new Error("手机号格式不正确"));
            } else {
              callback();
            }
          },
        },
      },
      homebg: bgBase64.lawyerBg,
    };
  },
  onLoad() {
    this.userId = getStorage(application.user).userId;
    this.getLawyerInfo();
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    this.$nextTick(() => {
      this.$refs.form.setRules(this.rules);
    });
  },
  methods: {
    getLawyerInfo() {
      this.$store
          .dispatch("LawyerInfo", this.userId)
          .then((res) => {
            this.form = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
    },
    checkboxChange(event) {
      console.log(event);
    },
    //勾选协议
    changeState() {
      this.radiovalue = !this.radiovalue;
    },
    submit() {
      if (!this.radiovalue) {
        uni.showToast({
          title: "请勾选协议",
          icon: "none",
        });
        return;
      }
      if(!isPhoneNumber(this.form.phone)){
        uni.showToast({
          title: "手机号格式不正确",
          icon: "none",
        });
        return;
      }
      this.$refs.form
          .validate()
          .then((res) => {
            this.$store
                .dispatch("LawyerEdit", this.form)
                .then((res) => {
                  uni.showToast({
                    title: "修改成功",
                    icon: "none",
                  });
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1000);
                })
                .catch((err) => {
                  uni.showToast({
                    title: err.msg,
                    icon: "none",
                  });
                });
          })
          .catch((errors) => {
            uni.$u.toast("请填写完整信息");
          });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f7fa;
}

.law-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top {
    height: 8rem;
    position: relative;
    background-size: 100% 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 1.5rem;
      color: #ffffff;
      margin-top: 1rem;
    }
    .sub-title {
      font-size: 1rem;
      color: #ffffff;
      margin-top: 0.5rem;
    }
  }
  .example {
    width: 95%;
    background-color: #ffffff;
    border-radius: 10px;
    position: absolute;
    left: 2%;
    top: 5rem;
    padding: 0.5rem;
    padding-left: 1rem;
    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      text {
        color: #999;
      }
    }
    .flex-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      text-align: center;
      text {
        color: #999;
      }
    }
  }
  .marginTop {
    margin-top: 0.5rem;
    .radio {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      border: 1px solid #999;
    }
    .radio-checked {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e43d33;
    }
  }
  .bottom {
    margin-top: 1rem;
  }
}
</style>
